<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>供应商首页</title>
    <!--    <link rel="stylesheet" href="css/main.css">-->
    <link th:href="@{ /css/bootstrap-4.6.2-dist/css/bootstrap.min.css}" rel="stylesheet">
    <!--    <link rel="stylesheet" href="../static/css/bootstrap-4.6.2-dist/css/bootstrap.min.css">-->
</head>
<body>
<div class="container">
    <div class="row text-center bg-dark text-light">
        <div class="col-2">
            <img src="/img/market.jpg" alt="Market Image" width="100%">
        </div>
        <div class="col-7">
            <h2>欢迎使用超市管理系统</h2>
        </div>
        <div class="col-2 user-info">
            <span>当前用户:</span>
            <span th:text="${username}"></span>
            <span><a href="/logout">退出</a></span>
        </div>
    </div>
    <div class="row" style="min-height: 400px;">
        <div class="col-2 bg-dark text-light">
            <li>
                <a href="/main"> 管理系统首页</a>
            </li>
            <li>
                <a href="/api/goods"> 商品首页</a>
            </li>
            <li>
                <a href="/suppliers/suppliersList"> 管理供应商模块</a>
            </li>
            <li>
                <a href="/inventory/inventoryList"> 管理库存模块</a>
            </li>
        </div>

                <div class="col-10 pt-2">
                    <div class="row text-center">
                        <div class="col-9"></div>
                        <div class="col-3">
                            <a href="/suppliers/suppliersAdd" class="btn-warning">新增</a>
                        </div>

                    </div>

                    <p>目前现有供应商列表</p >
<!--                    <p th:text="${data}"></p >-->
                    <table class="table table-bordered">
                        <thead>
                        <th>序号</th>
                        <th>供应商名</th>
                        <th>地址</th>
                        <th>联系方式</th>
<!--                        <th>供应商</th>-->
                        <th>管理</th>
                        </thead>
                        <tbody>
                        <tr th:each="suppliers:${data}">
                            <td th:text="${suppliers.getId()}"></td>
                            <td th:text="${suppliers.getName()}"></td>
                            <td th:text="${suppliers.getAddr()}"></td>
                            <td th:text="${suppliers.getPhone()}"></td>
<!--                            <td th:text="${goods.supplier}"></td>-->
                            <td>
                                <button class="btn btn-danger" th:onclick="del([[${suppliers.getId()}]])">删除</button>
                                <button class="btn btn-info" th:onclick="update([[${suppliers.getId()}]])">更新</button>

                            </td>
<!--                        </tr>-->
<!--                        </tbody>-->
                    </table>
                </div>
    </div>
<!--    <div class="row text-center bg-black">-->
<!--        @2023-2025 版权所有，违法必究-->
    <div class="row text-center bg-black footer">
        @2023-2025 版权所有，违法必究
    </div>
    </div>
<!--</div>-->

<!--</div>-->
<!--<p>这是系统管理首页，欢迎登录</p >-->
<!--<tr th:each="user:${data}">-->
<!--    <td th:text="${user.name}"></td>-->
<!--    <td th:text="${user.password}"></td>-->
<!--</tr>-->
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    function del(id){
        var flag = confirm("是否删除这个记录？");
        if (flag == true){
            //     jquery的post方法ajax方法
            $.post("/api/suppliersDelete",{"id":id},function(res){
                console.log(res)
                if (res==1){
                    alert("删除成功");
                    location.reload();
                }else {
                    alert("删除失败");
                }
            })
        }

    }
    function update(id){
        var flag = confirm("是否更新这个记录？");
        if(flag==true){
            location.href="/suppliers/suppliersUpdate?id="+id;
        }
    }
</script>